<template>
	<view class="container">
		<view class="top"></view>

		<uni-card class="card">
			<uni-forms :modelValue="formData" ref="form">
				<!-- 标题 -->
				<uni-forms-item label="标题" required>
					<uni-easyinput v-model="formData.title" placeholder="请输入活动标题" maxlength="50" />
					<text v-if="errorMessages.name" class="error">{{ errorMessages.name }}</text>
				</uni-forms-item>

				<!-- 内容 -->
				<uni-forms-item label="内容">
					<uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入活动内容" maxlength="200" />
				</uni-forms-item>

				<!-- 图片 -->
				<uni-forms-item label="图片">
					<u-upload v-model="fileList" :max-count="5" :file-types="['image']"
						:file-exts="['jpg', 'jpeg', 'png']" @afterRead="afterRead" @delete="deleteFile" />
					<view v-if="formData.resources.length" class="preview-list">
						<view v-for="(file, index) in formData.resources" :key="index" class="preview-item">
							<image :src="file.url" class="preview-image" />
						</view>
					</view>
					<text v-if="errorMessages.resources" class="error">{{ errorMessages.resources }}</text>
				</uni-forms-item>
			</uni-forms>
		</uni-card>

		<view class="footer">
			<u-button text="发布" class="btn" @click="submitForm" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					title: '',
					content: '',
					resources: [], // 存储上传的图片信息
					shopId: '7'
				},
				fileList: [], // 用于绑定 u-upload 的上传图片列表
				errorMessages: {},
			};
		},
		methods: {
			async afterRead(event) {
				// 模拟图片上传并更新资源列表
				const uploadedImage = {
					name: event.file.name,
					url: event.file.url || event.file.tempFilePath, // 兼容 H5 和小程序路径
				};
				this.formData.resources.push(uploadedImage);
				console.log("上传图片成功:", this.formData.resources);
			},
			deleteFile(event) {
				// 删除指定的图片
				this.formData.resources.splice(event.index, 1);
				console.log("删除图片后列表:", this.formData.resources);
			},
			submitForm() {
				this.errorMessages = {}; // 清空错误信息
				let that = this;

				// 校验逻辑
				if (!this.formData.title) {
					this.errorMessages.name = '标题不能为空';
				}
				if (!this.formData.resources.length) {
					this.errorMessages.resources = '请上传至少一张图片';
				}

				// 提交逻辑
				if (Object.keys(this.errorMessages).length === 0) {
					console.log('表单数据:', this.formData);
					this.$http({
						url: '/api/activity/activity',
						method: 'Post',
						data: that.formData,
						success(res) {
							uni.showToast({
								title: '操作成功',
								icon: 'success',
							});
						}
					})

				}
			},
		},
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		gap: 5rpx;
	}

	.top {
		padding-right: 20rpx;
		padding-left: 20rpx;
		height: 300rpx;
		background-color: #2f81fa;
		padding-top: 60rpx;
	}

	.card {

		padding: 50rpx 0rpx;
		width: 90%;
		position: relative;
		left: -15rpx;
		top: -360rpx;
		border-radius: 5%;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.uni-forms-item {
		margin-top: 70rpx;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: column;
	}

	.error {
		color: red;
		font-size: 22rpx;
		margin-top: 8rpx;
	}

	.preview-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.preview-item {
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}

	.preview-image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.footer {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}

	.btn {
		position: relative;
		top: -300rpx;
		width: 80%;
		border-radius: 50rpx;
		background-color: #1e90ff;
		color: white;
	}
</style>